前述

終於來到最後一天！
今天就不寫程式了，
帶大家認識 lottie ，
這也是在工作需求才意外學習到的 library ，
出自 airbnb ，可以更快更有效地實踐動畫效果，
再也不會讓工程師跟設計師之間憑著想像力去溝通做動畫 XD

render 的方式你可選擇 svg 或是 canvas ，
它是利用 json 渲染成動畫的，
當然！
除了 web 外，
其他裝置都可以使用，
聽起來很吸引人吧！

這裡有很多，大家寫好的動畫資源，
你要是需要，還可以選擇 免費 的動畫，

方法一

選擇下面的 html 點擊後，會前往另一個頁面，你可以任意調整大小，與速度，然後就可以直接取得 code，貼上你的程式碼，完成！

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets2.lottiefiles.com/packages/lf20_lH3QMK.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop controls autoplay></lottie-player>

方法二

假如你是使用 React，你可以選擇好喜歡的動畫後，取得他的 URL

https://assets2.lottiefiles.com/packages/lf20_lH3QMK.json

下載 react-lottie npm

import * as animationData from './XXX.json'

 const defaultOptions = {
      loop: true,
      autoplay: true, 
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice'
      }
    };
 
 
 <div>
      <Lottie options={defaultOptions}
              height={400}
              width={400}
              isStopped={this.state.isStopped}
              isPaused={this.state.isPaused}/>
    </div>

codesendbox

完成啦！

完賽感言

說實話，
一開始本來沒有想要參加的，
因為本人一直秉持著，
下班不碰程式，做一個生活與工作保持平衡的人，
事實上好像很難做到．．．

在同事的鼓吹下決定參賽，
到開賽前也是勉強湊出五篇文，
一開始每天寫也覺得沒什麼，
但當白天的工作負擔變重，
晚上又騰不出時間的時候，
真的是很痛苦，哈哈哈哈
懊悔自己為什麼要做這種不明智的決定XD

要說真的完賽，我覺得自己還是差了一點，
畢竟有幾篇不是真的有寫出來....
再次讚嘆可以完整寫出 30 篇的鐵人們。

感謝狀

雖然很可惜當初鼓吹參賽的夥伴，
已成為前同事 ?，
還是很感謝他們，
在他們身上看到對程式充滿熱情的樣貌，
也覺得自己好像有被鼓舞到 ?

祝福 各位伙伴們未來都開開心心！